<template>
  <div class="panal">
    <div class="media">
      <!-- 信息 -->
      <div class="media-left">
        <ul>
          <li>您好, {{userInfo.mobile}}</li>
          <li>
            会员:
            <span class="text-red">{{userInfo.dtype === 'Member'?"普通会员":"高级会员"}}</span>
          </li>
          <li>
            会员卡号: <span class="text-red">{{Number(userInfo.id)}}</span>
          </li>
        </ul>
      </div>
      <!-- 当前进行的订单-->
      <div class="media-right">
        <ul>
          <li>
            <a href="#">
              <div class="media-label">
                <div class="label-icon">
                  <i class="el-icon-wallet bg-light" style="background-color:#49a9ee"></i>
                </div>
                <div class="label-text">
                  <h1 class="media-heading" style="color:#49a9ee;">2</h1>
                  <p>等待付款</p>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="media-label">
                <div class="label-icon">
                  <i class="el-icon-box bg-light" style="background-color:#f78e3d"></i>
                </div>
                <div class="label-text">
                  <h1 class="media-heading" style="color:#f78e3d;">1</h1>
                  <p>等待发货</p>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="media-label">
                <div class="label-icon">
                  <i class="el-icon-truck bg-light" style="background-color:#ffce3d"></i>
                </div>
                <div class="label-text">
                  <h1 class="media-heading" style="color:#ffce3d;">2</h1>
                  <p>已发货</p>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="media-label">
                <div class="label-icon">
                  <i class="el-icon-check bg-light" style="background-color:#3dbd7d"></i>
                </div>
                <div class="label-text">
                  <h1 class="media-heading" style="color:#3dbd7d;">2</h1>
                  <p>已完成</p>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Information",
    props:['userInfo'],
    setup() {
      return{
      }
    }
  }
</script>

<style scoped>
  *{
    color: #333;
  }
  ul,li{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  a{
    text-decoration: none;
  }
  .panal{
    margin-bottom: 17px;

  }
  .media{
    padding: 15px;
    width: 1075px;
    background-color: white;
  }
  .media-left{
    border-right: 1px solid #f0f0f0;
    padding: 0px 50px 0px 10px;
    display: table-cell;
  }
  .media-left ul li{
    line-height: 30px;
    font-size: 12px;
  }
  .text-red{
    color: red;
  }

  .media-right{
    padding-left: 50px;
    display: table-cell;
    vertical-align: middle;
    width: 800px;
  }
  .media-right ul li{
    width: 25%;
    float: left;
  }
  .media-right ul li a:hover div div .bg-light{
    opacity: 0.8;
  }
  .media-label{
    display: table-cell;
  }
  .label-icon{
    padding-right: 10px;
    display: table-cell;
    vertical-align: middle;
  }
  .bg-light{
    width: 70px;
    height: 70px;
    line-height: 70px;
    display: block;
    margin-right: 10px;
    color: #ffffff;
    font-size: 35px;
    text-align: center;
    transition: opacity 0.5s;
    border-radius: 50%;
  }
  .label-text{
    display: table-cell;
    overflow: hidden;
  }
  .label-text p{
    color: #999999;
    font-size: 14px;
  }
  .media-heading{
    max-height: 76px;
    line-height: 38px;
    overflow: hidden;
    margin-bottom: 5px;
    font-weight: normal !important;
  }
</style>